<template>
  <div class="text-widget" :style="textStyle">
    <span class="text-content">{{ text }}</span>
    <div v-if="debugMode" class="debug-info">
      ID: {{ componentId }} | Type: {{ componentType }}
    </div>
  </div>
</template>

<script setup>
import { computed, inject } from 'vue'

const props = defineProps({
  text: {
    type: String,
    default: '文本内容'
  },
  fontSize: {
    type: Number,
    default: 14
  },
  color: {
    type: String,
    default: '#333333'
  },
  fontWeight: {
    type: String,
    default: 'normal'
  },
  textAlign: {
    type: String,
    default: 'left'
  },
  componentId: {
    type: String,
    default: 'unknown'
  },
  componentType: {
    type: String,
    default: 'text'
  }
})

// 注入调试模式
const debugMode = inject('debugMode', false)

const textStyle = computed(() => ({
  fontSize: `${props.fontSize}px`,
  color: props.color,
  fontWeight: props.fontWeight,
  textAlign: props.textAlign,
  lineHeight: 1.5,
  wordBreak: 'break-word',
  minHeight: '16px', // 从 20px 减少到 16px
  display: 'block'
}))

// 调试信息
if (debugMode) {
  console.log(`📝 TextWidget 渲染 - ID: ${props.componentId}, Text: ${props.text}`)
}
</script>

<style scoped>
.text-widget {
  padding: 0; /* 将padding改为0，让文本内容紧贴边框 */
  cursor: pointer;
  user-select: none;
  border-radius: 2px; /* 添加圆角 */
}

.text-widget:hover {
  background-color: rgba(64, 158, 255, 0.05); /* 更淡的hover背景 */
  border-radius: 2px;
}
</style> 